iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1

會取這樣的標題是因為我覺得,原本的網頁只是純粹展示內容的 html ,到後來動態網頁的出現,管理大量的內容可以不用再一個個的檔案維護,而可以交給資料庫與樣版引擎,當然還有寫好的後端程式,接著 js 越來越強大,開始出現了在前端渲染頁面的做法,後端開始專注在資料的處理,其它的一切又交到了前端的手上,而到現在 JAMStack 的出現,又再度回歸到靜態內容,只是這次不是自己手動去維護,而是改讓程式幫忙產生了

在第一篇時就提過了, JAMStack 是 JavaScript, API, Markup 合在一起的簡稱,但它並沒有一定要包含這三個元素,事實上它的重點在於靜態的內容,所以手寫的 html 也算是 (by 官網), JAMStack 有 4 大優點

  1. 快,除了快還是快,因為內容都是靜態的,完全可以由 CDN cache 來加快速度 (當然如果你包含了很大的圖片什麼的還是會很慢就是了)
  2. 安全,因為根本沒有可以被入侵的後端 (或說幾乎沒有), JAMStack 完全不需要後端的 (有能動態提供內容的後端就不是 JAMStack 了)
  3. 便宜與方便擴展,再說一次,因為只有靜態內容,所以很容易被 CDN cache
  4. 更好的 DX ,使用現成的 Static Site Generator ,開發者就只要專注在內容上就行了,但前提是你不是 Static Site Generator 的開發者,而殘念的是,這就是這系列的主題

是的,這次我們不是要來介紹用 JAMStack 建個部落格之類的,我們要來打造 JAMStack 底下的 Static Site Generator (之後都會簡稱 SSG) ,不過講到 SSG 之前,我們還要來談談支援客戶端渲染的前端框架與函式庫,與為了改善因為內容在客戶端渲染而導致 SEO 爆炸的 Server Side Rendering (之後簡稱 SSR ,不是指卡片的稀有度喔),前端自從有了這類的框架與函式庫,開發工作就得以開始變得模組化 (你可以把相同的部份抽出來變成一個元件) 與像是宣告式的程式設計一樣 (只要指定好資料與頁面的關係,當資料改變時頁面就跟著改變) ,這些好處使得現代的前端開發幾乎離不開這些工具

然而這些工具的缺點,搜尋引擎最佳化 (SEO) 不好也跟著出現了,因為內容變成在客戶端產生,使得搜尋引擎的爬蟲 (除了 Google 黑科技外) 基本上抓不到這些內容了,於是 SSR 誕生了,它把原本在客戶端渲染的內容,又拿回伺服器做,再傳給客戶端,這樣搜尋引擎又看的到內容了,於時這時大概就有人想到了,這不就又變成了樣版引擎了嗎?那可不可以拿來產生靜態的網頁呢?於是這次的主角 SSG 出現了,它結合的內容管理系統 (CMS) 的優點,與靜態網頁的特性,你可以用像 CMS 一樣的方法,建立出可以佈署在任何網頁空間的網站,目前常見的有除了這次參考的目標 Gatsby 外,還有像 Hexo, Hugo 等等

下一篇要來介紹 React ,並開始建立環境,不過我的重點並不是介紹 React 本身就是了,而是介紹為什麼我想用 React


上一篇
Day 1: 前言
下一篇
Day 3: React 介紹與建構環境
系列文
從 0 開始建一個 Static Site Generator30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言